﻿// ext实例展示的js文件
Ext.BLANK_IMAGE_URL = 'images/public/s.gif"';
Ext.QuickTips.init(); // 加载快速提示框
Ext.namespace('ExtExample'); // 创建名字域
// 应用程序主页面
ExtExample.app = function() {
	// 空函数
};
Ext.extend(ExtExample.app, Ext.util.Observable, {
	// 顶端
	header: new Ext.BoxComponent({
		region: 'north',
		el: 'north',
		height: 30,
		margins: '5'
	}),
	// 低端
	footer: new Ext.BoxComponent({
		region: 'south',
		el: 'south',
		height: 25
	}),
	// 实例菜单树形区
	menuTree: new Ext.tree.TreePanel({
		title: '实例菜单',
		region: 'west',
		id: 'extExample-tree',
		autoScroll: true,
		enableDD: false, // 是否支持拖拽效果
		containerScroll: true, // 是否支持滚动条
		split: true,
		width: 180,
		minSize: 175,
		maxSize: 300,
		rootVisible: true, // 是否显示跟节点
		//collapseMode:'mini',//在分割线处出现按钮
		collapsible: true,
		margins: '0 0 5 5',
		loader: new Ext.tree.TreeLoader({
			dataUrl: 'extmenutree.json'
		})
	}),
	// 菜单根节点
	menuRoot: new Ext.tree.AsyncTreeNode({
		id: 'menu',
		text: 'ExtJs2.0 实例展示'
	}),

	// 主要显示区
	main: new Ext.TabPanel({
		region: 'center',
		enableTabScroll: true,
		activeTab: 0,
		margins: '0 5 5 0',
		items: [new Ext.Panel({
			id: "workPing",
			title: "首页",
			border: false,
			autoLoad: 'info.html'
		})]
	}),

	// 初始化构造函数
	init: function() {
		this.menuTree.setRootNode(this.menuRoot);
		this.menuRoot.expand();

		// 给树形菜单添加事件
		this.menuTree.on('click', this.menuClickAction, this);

		// 给main的tab页面添加tabchange事件
		this.main.on('tabchange', this.changeTab, this);

		var myView = new Ext.Viewport({
			layout: 'border',
			border: false,
			items: [this.header, this.main, this.footer, this.menuTree]
		});

		// 新建一个mask
		this.loadMask = new Ext.LoadMask(this.main.body, {
			msg: "页面加载中……"
		});

	},
	// 属性菜单的点击事件
	menuClickAction: function(node) {
		if (!node.isLeaf()) {
			return false;
		}
		// alert(node);
		var tabId = 'tab-' + node.id;
		var tabTitle = node.text;
		var tablink = node.attributes.link;
		var tabJsArray = node.attributes.jsArray; // 得到js文件存放的路径
		var tab = this.main.getComponent(tabId); // 得到tab组建

		if (!tab) {
			tab = this.main.add(new Ext.Panel({
				id: tabId,
				title: tabTitle,
				autoScroll: true,
				layout: 'fit',
				border: false,
				closable: true
			}));

			this.main.setActiveTab(tab);

			var loadmask = this.loadMask;

			var model; // 加载模块js预置变量名

			loadmask.show();
			// panel组建开始异步加载url的html
			tab.load({
				url: tablink, // 加载的url
				// 加载html成功后的回调函数
				callback: function(a, b, c) {
					var jsStr = ""; // 创建一个空字符串，用来装载接受的js文件内容
					var num = tabJsArray.length;
					for (var i = 0; i < num; i++) {
						// 由于异步加载的html不能以<script
						// src=xxx.js>的方式加载javascript所以在此再调用一个ajax异步加载模块的js文件
						var tabjs = tabJsArray[i].js; // 取得数组中的js文件
						var currentIndex = i; // 获取当前js文件的索引
						Ext.Ajax.request({
							method: 'POST', // 为了不丢失js文件内容，所以要选择post的方式加载js文件
							url: tabJsArray[i].js,
							scope: this,
							success: function(response) {

								jsStr += response.responseText; // 把每次加载的内容都存入jsStr中

								if (currentIndex == num - 1) {// 如果当前索引号为最后一个时开始创建应用的实例
									// 获取模块类
									this[node.id] = eval(jsStr);
									// 实例化模块类
									model = new this[node.id]();
									loadmask.hide();
								}

								// 之所以要重写tabpanel的destroy函数，是因为在要执行每个实例类的自定义的destroy函数。
								// 原因在于，用IE在有些情况下不能完全释放实例。
								// 比如“树的高级应用（一）”实例中的window对象，如果该对象不执行destroy函数时再此打开时会报错。

								tab.on('destroy', function() {
									model.destroy();
								});
							},
							failure: function(response) {
								Ext.Msg.show({
									title: "错误信息",
									msg: "加载页面核心文件时发生错误！",
									buttons: Ext.MessageBox.OK,
									icon: Ext.MessageBox.ERROR
								});
								loadmask.hide();
							}
						});
					}
					if (b == false) {
						Ext.Msg.show({
							title: "错误信息",
							msg: "加载页面超时或是页面连接不正确！",
							buttons: Ext.MessageBox.OK,
							icon: Ext.MessageBox.ERROR
						});
						loadmask.hide();
					}
				},
				discardUrl: false,
				nocache: true,
				text: "",
				timeout: 3000, // 超时时间30s
				scripts: true
			});
		} else {
			this.main.setActiveTab(tab);
		}
	},

	// change的实现
	changeTab: function(tab, newtab) {
		// 如果存在相应树节点，就选中,否则就清空选择状态
		var nodeId = newtab.id.replace('tab-', '');
		var node = this.menuTree.getNodeById(nodeId);
		if (node) {
			this.menuTree.getSelectionModel().select(node);
		} else {
			this.menuTree.getSelectionModel().clearSelections();
		}
	}

});

Ext.onReady(function() {
	var extExample = new ExtExample.app();

	extExample.init();
});